<template>
    <div class="page-container">
    <div class="page-content">
        <!-- 左侧相关文章开始 -->
        <!-- 左侧相关文章结束 -->
        <!-- 文章内容开始 -->
        <div class="content-left">
            <ArticleDetail
                :articleId="Number(articleId)"
                @article-toc="handleArticleToc"
            />
        </div>
        <!-- 文章内容结束 -->
        <!-- 文章目录开始 -->
        <div class="content-right">
           <ArticleTocList :article_toc="currentArticle || ''" />
            <TagCloud/>
            <RandomArticleList />
          <CategoryArticleCard />
        </div>
        <!-- 文章目录结束 -->
    </div>
    </div>
</template>
<script setup>
import ArticleDetail from '@/components/articles/details/ArticleDetail.vue'
import ArticleTocList from '@/components/articles/details/ArticleTocList.vue'
import TagCloud from '@/components/articles/card/TagList.vue'
import CategoryArticleCard from "@/components/articles/card/CategoryArticleCard.vue";
import RandomArticleList from "@/components/articles/card/RandomArticleList.vue";

const currentArticle = ref(null)

const handleArticleToc = (article) => {
  currentArticle.value = article
}
const route = useRoute()
const articleId = ref(route.params.id)
// 监听路由变化
watch(route, () => {
  articleId.value = route.params.id
})
</script>
<style scoped>
.page-content {
  margin: 40px auto;
}
</style>